<template>
  <div class="mod_box">
    <el-tabs v-model="tabIndex" type="card" @tab-click="tabClick">
      <el-tab-pane label="全部" name="_"></el-tab-pane>
      <el-tab-pane label="申请中" name="0"></el-tab-pane>
      <el-tab-pane label="审核中" name="1"></el-tab-pane>
      <el-tab-pane label="已办结" name="2"></el-tab-pane>
    </el-tabs>

    <el-row class="mod_title">
      <el-col :sm="12">
        <div class="g-title">车辆加油（{{total}}个）</div>
      </el-col>
      <el-col :sm="12" style="text-align: right;">
        <el-button type="primary" @click="add" size="small" v-if="userInfo.dr==1">新增</el-button>
      </el-col>
    </el-row>

    <el-table :data="listData" @selection-change="handleSelectionChange" border>
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column prop="taskName" label="状态" align="center"></el-table-column>
      <el-table-column prop="createDate" label="申报时间" align="center"></el-table-column>
      <el-table-column prop="propName" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" @click="viewDetail(scope.row)" size="small">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row style="padding: 32px 16px;">
      <el-col>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageSize"
          :total="total"
          :current-page="pageNo"
          @current-change="fetchData"
          @size-change="pageSizeChange"
        ></el-pagination>
      </el-col>
    </el-row>

    <add ref="add" @finish="fetchData"></add>
    <detail ref="detailComp"></detail>
  </div>
</template>
<style lang="scss" scoped>
.mod_box {
  padding: 20px;
}
.mod_title {
  padding: 20px 0;
  .g-title {
    height: 20px;
    padding-left: 8px;
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    border-left: 2px solid #f54e40;
    margin: 10px 0;
    display: inline-block;
  }
}
</style>
<script>
import { listJson } from "@/api/carju";
import add from "./components/add";
import detail from "./components/detail";
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["userInfo"])
  },
  components: { add, detail },
  data: function() {
    return {
      tabIndex: "_",
      total: 0,
      pageNo: 1,
      pageSize: 10,
      listData: [],
      listDataSelected: [] //选中数据
    };
  },
  methods: {
    add() {
      this.$refs.add.open();
    },
    viewDetail(data) {
      this.$refs.detailComp.viewTask(data);
    },
    async fetchData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: this.tabIndex == "_" ? "" : this.tabIndex
      };
      let data = await listJson(params);
      this.listData.splice(0, this.listData.length, ...data.data);
      this.total = data.total;
    },
    tabClick() {
      this.pageNo = 1;
      this.fetchData();
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    //表格多选
    handleSelectionChange(val) {
      this.listDataSelected.splice(0);
      val.forEach(e => {
        this.listDataSelected.push(e);
      });
      console.log(this.listDataSelected);
    }
  },
  created() {
    this.fetchData();
  }
};
</script>